<template>
    <div class="content">
        <AlarmRow :value="device.deviceCode">
            <template slot="label">
                <el-tooltip v-if="showCollect" content="收藏后可在实时视频的摄像机收藏列表中查看" placement="top-start" effect="dark" offset="10">
                    <i v-if="deviceCodeCollect === '1'" class="iconfont icon-yishoucang active" style="color: #FF6A6C;" @click="collectDevice('0')"></i>
                    <i v-else class="iconfont icon-weishoucang1" style="color: #606266;" @click="collectDevice('1')"></i>
                </el-tooltip>
                <span>摄像机编号：</span>
            </template>
        </AlarmRow>
        <AlarmRow :value="device.deviceName">
            <template slot="label">
                <el-tooltip placement="top" popper-class="event-tooltip" content="实时视频" v-if="isShowRealTimeVideo">
                    <i style="color: #1990FF" class="iconfont icon-shishishipin icon" @click="videoClick"></i>
                </el-tooltip>
                <span>摄像机名称：</span>
            </template>
        </AlarmRow>
        <DeviceTags
          v-if="device?.deviceLabel?.length"
          :device-label="device.deviceLabel"
        ></DeviceTags>
        <AlarmRow label="摄像机厂家：" :value="device.modelCodeName" />
        <AlarmRow label="摄像机挂高：" :value="device.height ? device.height + 'm' : ''" />
        <AlarmRow label="摄像机经纬度：" :value="`${pt.lng}，${pt.lat}`" />
        <AlarmRow label="抓图时间：" :value="device.snapShotTime" v-if="device.snapShotTime"/>
        <AlarmRow label="摄像机地址：" :value="device.location" isSingle/>
    </div>
</template>
<script>
import { getDeviceChannel4Tt } from '@/api/modules/eventManagement/eventDetail'
import { updatemonitorCollect } from '@/api/video/index.js'
import AlarmRow from './AlarmRow.vue'
import DeviceTags from "@/components/eventManagement/infos/DeviceTags.vue";
export default {
    components: {
        AlarmRow,
        DeviceTags
    },
    props: {
        /**
         * @device {Object}
         * "deviceCode":"11010800831327000008"，  //摄像机编号
           "deviceName":"铁塔产业园-11号楼-大来咯来咯华243"， //摄像机名称
           "longitude":"117.255514323"， //经度
           "latitude":"35.636384233"，      //纬度
           "location":"山东省济宁市泗水县济河街道泗水站"，  //摄像机地址
           "height":"10"，  //摄像机挂高
           "modelCodeName":"大华"，  //摄像机厂家
           "snapShotTime":"2023-09-20 15:50:20"   //摄像机抓图时间
         */
        device: {
            type: Object,
            required: true
        },
        // 是否收藏
        deviceCodeCollect: String,

        // 是否显示收藏按钮
        showCollect: Boolean,

        // 是否显示实时视频
        isShowRealTimeVideo: {
            type: Boolean,
            default: true
        },

        labelSpan: {
            type: Number,
            default: 4
        },
        col: {
            type: Number,
            default: 24
        },
        titleWidth: {
            type: String,
            default: 'labelWidth5'
        }
    },
    computed: {
        pt() {
            const { longitude, latitude } = this.device
            return {
                lng: longitude ? parseFloat(longitude).toFixed(6) : '',
                lat: latitude ? parseFloat(latitude).toFixed(6) : ''
            }
        }
    },
    methods: {
        /**
         * 视频收藏
         */
        collectDevice(flag) {
            let param = {
                collObjType: '5',
                collObjCode: [this.device.deviceCode],
                optType: flag
            }
            // 调用收藏接口
            updatemonitorCollect(param).then((res) => {
                if (res.code == 200) {
                    const message = res.msg === '新增收藏成功' ? "收藏成功" : res.msg
                    $message.success(message)
                    this.$emit('update:deviceCodeCollect', flag)
                } else {
                    $message.error(res.msg)
                }
            })
        },
        videoClick() {
            const { deviceCode } = this.device
            getDeviceChannel4Tt({ deviceCode }).then((res) => {
                if (res.code === 200) {
                    const channelCodeList = res.data.channels // 通道列表
                    if (channelCodeList && channelCodeList.length > 0) {
                        let channelCodeData = {
                            isVideoList: channelCodeList.map((item) => {
                                return {
                                    deviceCode: deviceCode,
                                    channelCode: item.channelCode,
                                    monitorName: item.channelName
                                }
                            }),
                            numberList: channelCodeList.length,
                            videoThis: this
                        }
                        this.$splitScreen(channelCodeData)
                    }
                }
            })
        }
    }
}
</script>
